<template>
	<view class="responseRecord ff-margin-bottom-40">
		<view v-if="responseList.length > 0">
			<view v-for="(item, index) of responseList" :key="index"
				class="responseRecord-content ff-margin-12 ff-margin-bottom-15">
				<view class="responseRecord-title ff-margin-bottom-8 ff-font-12">响应于{{ item.created }}</view>
				<view class="ff-bg-fff ff-border-radius-10">
					<view class="ff-flex">
						<view class="responseRecord-content-right ff-margin-right-10">
							<image
								src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/default_avatar.png"
								mode=""></image>
						</view>
						<view class="responseRecord-content-left">
							<view class="ff-font-16 ff-font-weight-600 ff-line-height-1-3">{{ item.org.orgName }}</view>
							<view class="ff-flex">
								<view class="ff-font-13 responseRecord-content-left-fraction ff-flex">
									<view class="ff-color-fff">
										{{ item.org.registerNum !== null ? item.org.registerNum : 0 }}
									</view>
									一消证书
								</view>
								<view class="ff-font-13 ff-margin-left-10 responseRecord-content-left-fraction ff-flex">
									<view class="ff-color-fff">
										{{ item.org.operatorNum !== null ? item.org.operatorNum : 0 }}
									</view>
									操作员证书
								</view>
							</view>
							<view class="ff-flex ff-font-12 ff-color-gray-one responseRecord-content-left-address">
								<view class="ff-align-items-one">
									<image
										src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/home-address.png">
									</image>
									<view class="ff-margin-left-3 ff-line-height-1-3">距离您{{ item.org.nearest / 1000 }}km
										| {{ item.org.orgAddr }}</view>
								</view>
							</view>
						</view>
					</view>
					<view class="responseRecord-info ff-flex-between ff-align-items-one ff-border-radius-10">
						<view class="ff-text-center">
							<view class="ff-font-18 ff-font-weight-600">{{ item.price }}</view>
							<view class="ff-font-12">报价/元</view>
						</view>
						<view>
							<u-button v-if="item.status == 1" @click="selectedClick(item)" type="primary" shape="circle"
								size="mini">选定机构</u-button>
							<u-button v-if="item.status == 2" :disabled="true" type="primary" shape="circle"
								size="mini">已选定</u-button>
							<u-button v-if="item.status == 3" :disabled="true" type="primary" shape="circle"
								size="mini">已失效</u-button>
							<u-button @click="phoneClick(item.org.orgPhone)" type="primary" shape="circle" size="mini"
								plain>电话咨询</u-button>
						</view>
					</view>
				</view>
			</view>
		</view>
		<f-noData v-else :topStyle.sync="topStyle"></f-noData>
		<u-modal v-model="locationModal" show-cancel-button="true" @confirm="confirmClick" cancel-text="我再想想"
			confirm-text="确定选择" :title="title" :content-style="{ 'line-height': '1.5' }" :content="content" />
	</view>
</template>

<script>
	export default {
		name: 'responseRecord',
		props: ['responseList'],
		data() {
			return {
				locationModal: false,
				title: '选定机构',
				content: '',
				responseId: '',
				topStyle: '38%', // 暂无数据的css top状态
			};
		},
		methods: {
			// 选定该机构
			selectedClick(item) {
				this.content = `确定选择${item.org.orgName}吗？`;
				this.locationModal = true;
				this.responseId = item.assessResponseId;
			},
			// 确定选择该机构（点击确定按钮）
			confirmClick() {
				this.$emit('selectClick', this.responseId);
			},
			// 拨打机构电话
			phoneClick(phone) {
				if (!phone) {
					this.$refs.uToast.show({
						title: '当前无机构电话信息!',
						type: 'error'
					});
					return;
				}
				uni.makePhoneCall({
					phoneNumber: phone
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.responseRecord {
		margin-top: 440rpx;

		&-title {
			color: #c6cad4;
		}

		&-content {
			align-items: center;

			.ff-font-weight-600 {
				max-width: 460rpx;
			}

			.ff-bg-fff {
				padding: 27rpx 20rpx;
			}

			&-left {
				&-fraction {
					margin: 14rpx 20rpx 14rpx 0;
					align-items: center;
					color: #e7624b;

					view {
						background-color: #e7624b;
						padding: 4rpx 14rpx;
						border-top-left-radius: 15rpx;
						border-bottom-left-radius: 15rpx;
						border-bottom-right-radius: 15rpx;
						margin-right: 8rpx;
					}
				}

				&-address {
					.ff-align-items-one {
						image {
							width: 30rpx;
							height: 30rpx;
							margin-top: -5rpx;
						}
					}

					.ff-margin-left-3 {
						margin-left: 4rpx;
						max-width: 460rpx;
					}
				}
			}

			&-right {
				image {
					width: 120rpx;
					height: 120rpx;
				}
			}
		}

		&-info {
			background-color: #f3f8fe;
			padding: 30rpx 20rpx;

			.ff-text-center {
				.ff-font-18 {
					color: #e7624b;
					margin-bottom: 6rpx;
				}

				.ff-font-12 {
					color: #b5bbc8;
					letter-spacing: 3rpx;
				}
			}
		}
	}
</style>